<template>
	<view class="">
		<NavBar title="修改手机号" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="set_box">
			<text class="f_28_6">手机号</text>
			<view class="flex">
				<up-input type="number" placeholder="请输入手机号" border="none" v-model="userInfo.contact_mobile"
					 inputAlign="right"></up-input>
			</view>
		</view>
		<view class="submit_btn m_t_78 ">
			<up-button throttleTime="1000" @click="onSubmit">
				<text class="f_30_f_b">
					确定
				</text>
			</up-button>
		</view>
		<!-- <view class="next_box">
			<view class="btn f_28_9" @click="onJump">跳过</view>
		</view> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const uToastRef = ref(null)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 80 + 94}rpx)`
			}
		});
	})
	onShow(() => {
		getUserInfo()
	})
	const oldPhone = ref()
	const userInfo = ref()
	const getUserInfo = async () => {
		let res = await proxy.$http('my.getUserInfo')
		let data = res.data
		oldPhone.value = JSON.parse(JSON.stringify(data.contact_mobile))
		userInfo.value = data
	}
	// 保存
	const onSubmit = async () => {
		if (!userInfo.value.contact_mobile) {
			uni.$u.toast('手机号不能为空')
			return
		}
		uni.showLoading({
			title: "保存中"
		})
		let res = await proxy.$http("my.updateUser", {
			avatar: userInfo.value.avatar,
			nickname: userInfo.value.nickname,
			contact_mobile: userInfo.value.contact_mobile,
			gender: userInfo.value.gender,
		})
		uni.hideLoading()
		if (res.code == 1) {
			uni.showToast({
				title: "保存成功",
				icon: 'success'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		} else {
			uToastRef.value.show({
				message: res.msg
			})
		}
	}
	const leftClick = () => {
		uni.navigateBack()
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 30rpx;
		padding-bottom: 64rpx;

		.set_box {
			width: 634rpx !important;
			height: 100rpx !important;
			background: #ffffff !important;
			padding: 0 32rpx;
			border-radius: 16rpx !important;
			display: flex !important;
			justify-content: space-between !important;
			align-items: center !important;
			border: 0 !important;


		}


	}

	.submit_btn {
		::v-deep.u-button {
			width: 684rpx !important;
			height: 96rpx !important;
			background: #FD6C25 !important;
			border-radius: 48rpx !important;
		}
	}

	.next_box {
		display: flex;
		justify-content: center;
		margin-top: 8rpx;

		.btn {
			padding: 8rpx 10rpx;
		}

	}
</style>